zizhujianzhan_web/pages/search/[id].vue

<template>
    <div id="newsList">
        <!-- 头部 -->
        <templateHead v-if="skinId <= 4"></templateHead>
        <!-- 皮肤5头部 -->
        <templateHead5 v-if="skinId == 5"></templateHead5>
        <!-- 皮肤6头部 -->
        <templateHead6 v-if="skinId == 6"></templateHead6>
        <!-- 皮肤7头部 -->
        <templateHead7 v-if="skinId==7"></templateHead7>
        <!-- 菜单 -->
        <templateMenu v-if="skinId <= 4"></templateMenu>
        <!-- 皮肤5菜单 -->
        <templateMenu5 v-if="skinId >= 5"></templateMenu5>
        <div v-for="(item, index) in templateData" :key="index">
            <!--1.广告通栏-->
            <div v-if="item.sectorName == 'adSector'">
                <templateAd :skinId="skinId" :adData="adData" :adTag="item.ad.ad_tag"></templateAd>
            </div>
            <!-- 2.搜索列表 -->
            <div v-if="item.sectorName == 'searchListSector'">
                <templateSearch :skinId="skinId" :templateData="item.componentList"></templateSearch>
            </div>
            <!-- 3.皮肤5搜索列表 -->
            <div v-if="item.sectorName == 'searchListpicSector'">
                <templateSearchListpic :skinId="skinId" :templateData="item.componentList"></templateSearchListpic>
            </div>
            <!-- 3.皮肤6搜索列表 -->
            <div v-if="item.sectorName == 'SearchbigListSector'">
                <templateSearchListbig :skinId="skinId" :templateData="item.componentList"></templateSearchListbig>
            </div>
            <!-- 4.皮肤7搜索列表 -->
            <div v-if="item.sectorName == 'SevenSearchbigListscSector'">
                <templateSevenSearchbigListscSector :skinId="skinId" :templateData="item.componentList"></templateSevenSearchbigListscSector>
            </div>
        </div>
        <!-- 底部 -->
        <templateFoot v-if="skinId <= 4"></templateFoot>
        <!-- 皮肤5底部 -->
        <templateFoot1 v-if="skinId==5||skinId==6"></templateFoot1>
        <!-- 皮肤7底部 -->
        <templateFoot2 v-if="skinId==7"></templateFoot2>
    </div>
</template>

<script setup lang="ts">
//0.加载全局模板组件 start---------------------------------------->
//0.1 全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateHead5 from '@/components/template/sector/head/1200x250/1.vue'
import templateHead6 from '@/components/template/sector/head/1200x250/6.vue'
import templateHead7 from '@/components/template/sector/head/1200x250/7.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateMenu5 from '@/components/template/sector/menu/1200x187/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
import templateFoot1 from '@/components/template/sector/foot/1200x680/1.vue'
import templateFoot2 from '@/components/template/sector/foot/1200x700/1.vue'
//0.2.1 广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2 搜索组件
import templateSearch from '@/components/template/sector/body/search/list/1200x1300/1.vue'
//0.2.3 搜索列表图片组件
import templateSearchListpic from '@/components/template/sector/body/search/list/1200x2250/1.vue'
//0.2.4 搜索列表图片组件
import templateSearchListbig from '~/components/template/sector/body/search/list/1200x1530/6/1.vue'
//0.2.5 皮肤7搜索列表
import templateSevenSearchbigListscSector from '~/components/template/sector/body/search/list/1200x1720/1.vue'
//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref, onMounted } from 'vue';
//1.2获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore: any = useTemplateBaseStore()
//1.3获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref<number>(0)
const websiteId = ref<number>(0)
//1.4获得站点基本信息
const responseStatus: any = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum': 24,
        'link_imgnum': 18,
        'link_footnum': 4
    },
});
if (responseStatus.code == 200) {
    if (responseStatus.data.website_foot.foot_info.status == 1) {
        //网站模板已停用，直接转入404页面
        navigateTo('/error?findPage=index')
    } else {
        //0.3.1设置站点基本信息
        templateBaseStore.setWebSiteInfo(responseStatus.data)
        websiteId.value = responseStatus.data.website_head.id;//获得网站id
        //0.3.2设置皮肤id
        skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
        console.log("当前的网站id:" + responseStatus.data.website_head.id)
        //0.3.3设置seo信息
        let seoTitle = templateBaseStore.webSiteInfo.website_head.title;
        let seoDescription = templateBaseStore.webSiteInfo.website_head.description;
        let seoKeywords = templateBaseStore.webSiteInfo.website_head.keywords;
        let seoSuffix = templateBaseStore.webSiteInfo.website_head.suffix;
        let seoName = templateBaseStore.webSiteInfo.website_head.website_name;
        useHead({
            title: seoTitle + "_" + seoSuffix,
            meta: [
                { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
                { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
            ]
        });
    }
}
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
//2.1获得页面数据
const response = await requestDataPromise('/client/indexData', {
    method: 'POST',
    body: {
        'website_id': websiteId.value,
        'getpage': 'search'
    },
});
//页面数据
const templateData = response.data.template.search;
//是否启用搜索功能
templateBaseStore.setIsSearch(response.data.isSearch)
console.log(templateData)
//广告数据
const adData = ref<any[]>([]);
adData.value.push(response.data.ad.top)
for (let item of response.data.ad.search) {
    adData.value.push(item)
}
templateBaseStore.setAdList(adData.value)
//2.页面数据 end---------------------------------------->
</script>

<style lang="less" scoped></style>